/**
* @description: 工程列表 未开工、已开工、已完工详情
* @author: JiWei
* @remark:
**/
<template>
  <view class="project-main">
    <nav-bar class="header" back title="工程详情" @goBack="goBack"/>
    <view class="project-content">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title"/>
      <view class="basic-info">
        <van-form>
          <van-field v-model="engInformation.engName" disabled label="工程名称" placeholder="请选择工程名称"
                     type="textarea" autosize  rows="1"
                     :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" required
                     right-icon="arrow" error-message-align="right" @click="onOpenPicker('projectName')"/>
          <van-field v-model="engInformation.stationName" disabled label="站点名称" placeholder="请选择站点名称"
                     :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" required
                     right-icon="arrow" error-message-align="right" @click="onOpenPicker('siteName')"/>
          <van-field v-model="engInformation.batchName" name="taskname" label="工程批次" placeholder="请输入工程批次"
                     input-align="right" error-message-align="right" disabled/>
          <van-field v-model="engInformation.ownerDeptName" name="taskname" label="业主单位"
                     placeholder="请输入业主单位"
                     input-align="right" error-message-align="right" disabled/>
          <van-field v-model="engInformation.ownerName" name="taskname" label="负责人" placeholder="请输入负责人"
                     input-align="right" error-message-align="right" disabled/>
          <van-field v-model="engInformation.consDeptName" name="taskname" label="施工单位" placeholder="请输入施工单位"
                     input-align="right" error-message-align="right" disabled/>
          <van-field v-model="engInformation.consName" name="taskname" label="负责人" placeholder="请输入负责人"
                     input-align="right" error-message-align="right" disabled/>
          <van-field v-model="engInformation.superviseDeptName" name="taskname" label="监理单位"
                     placeholder="请输入监理单位"
                     input-align="right" error-message-align="right" disabled/>
          <van-field v-model="engInformation.superviseName" name="taskname" label="负责人" placeholder="请输入负责人"
                     input-align="right" error-message-align="right" disabled/>
          <van-field v-model="engInformation.time" name="taskname" label="工程日期" placeholder="请输入工程日期"
                     input-align="right" error-message-align="right" disabled/>
        </van-form>
      </view>
      <view>
        <!-- 里程碑 -->
        <van-collapse v-model="projectActiveNames" accordion>
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">里程碑</text>
              </view>
            </template>
            <!--  里程碑  -->
            <ul class="milestone-main" v-if="routerType !== 'notService'">
              <li v-for="(milestoneItem,milestoneIndex) in milestoneList" :key="milestoneIndex">
                <view class="milestone-top">
                  <img :src="iconUrlLcb" alt="">
                  <text class="milestont-title">{{ milestoneItem.title }}</text>
                  <text class="milestone-state" :class="stateColor(milestoneItem.stateCode)">{{ milestoneItem.state }}
                  </text>
                </view>
                <hr>
                <view class="milestone-footer">
                  <view class="left-main">
                    <text class="left-title">计划时间:</text>
                    <text class="left-date">{{ milestoneItem.planTime }}</text>
                  </view>
                  <view class="left-main">
                    <text class="left-title">实际时间:</text>
                    <text class="left-date">{{ milestoneItem.realTime }}</text>
                  </view>
                </view>
              </li>
            </ul>
            <view class="share-main" v-if="routerType === 'notService'"> 暂无数据</view>
          </van-collapse-item>
        </van-collapse>
        <!-- 物资到货 -->
        <van-collapse v-model="arriveActiveName" accordion>
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">物资到货</text>
              </view>
            </template>
            <van-collapse v-model="suppliesActiveName" accordion v-for="(arriveItem,arriveIndex) in arriveList"
                          :key="arriveIndex" v-if="routerType !== 'notService'">
              <van-collapse-item class="arrive-second" :name="arriveItem.id" size="large">
                <template #title>
                  <view>
                    <img class="imgHistory" :src="iconUrlWzdh" alt="">
                    <text class="small-title">{{ arriveItem.title }}</text>
                  </view>
                </template>
                <view class="history-main">
                  <view class="image-list" v-for="(imgItem,imgIndex) in arriveItem.fileList" :key="imgIndex">
                    <img :src="imgItem.furl" alt="" @click.stop="imageHandle(imgItem, imgIndex, 'PREVIEW', [arriveIndex,imgIndex])">
                  </view>
                </view>
              </van-collapse-item>
            </van-collapse>
            <view class="share-main" v-if="routerType === 'notService'"> 暂无数据</view>
          </van-collapse-item>
        </van-collapse>
        <!-- 施工现场 -->
        <van-collapse v-model="sceneActiveName" accordion>
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">施工现场</text>
              </view>
            </template>
            <van-collapse v-model="sceneChildActiveName" accordion v-for="(sceneItem, sceneIndex) in sceneList"
                          :key="sceneIndex" v-if="routerType !== 'notService'">
              <van-collapse-item class="arrive-second" :name="sceneItem.id" size="large">
                <template #title>
                  <view>
                    <img class="imgHistory" :src="iconUrlSgxc" alt="">
                    <text class="small-title">{{ sceneItem.title }}</text>
                  </view>
                </template>
                <view class="scene-main">
                  <view class="left-main">
                    <text>当日现场</text>
                    <text>{{ sceneItem.currentSite }}</text>
                  </view>
                  <view class="left-main">
                    <text>施工人数</text>
                    <text>{{ sceneItem.workNum }}</text>
                  </view>
                </view>
              </van-collapse-item>
            </van-collapse>
            <view class="share-main" v-if="routerType === 'notService'"> 暂无数据</view>
          </van-collapse-item>
        </van-collapse>
        <!-- 工程进度 -->
        <van-collapse v-model="progessActiveName" accordion>
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">工程进度</text>
              </view>
            </template>
            <view class="progess-main" v-if="routerType === 'inService'">
              <uni-table ref="table" stripe empty-text="暂无更多数据">
                <uni-tr :style="{ backgroundColor: '#F5F6F8' }">
                  <uni-th v-for="(progessItem,progessIndex) in columns" :key="progessIndex" align="center"
                          :width="progessItem.width">{{ progessItem.label }}
                  </uni-th>
                </uni-tr>
                <uni-tr v-for="(projectItem,projectIndex) in tableData" :key="projectIndex"
                        :style="{ backgroundColor: '#F5F6F8' }">
                  <uni-td align="center">{{ projectItem.name }}</uni-td>
                  <uni-td align="center">{{ projectItem.amount ? projectItem.amount : '-' }}</uni-td>
                  <uni-td align="center">{{ projectItem.finished ? projectItem.finished : '-' }}</uni-td>
                  <uni-td align="center">{{ projectItem.unfinished ? projectItem.unfinished : '-' }}</uni-td>
                  <uni-td align="center">{{ projectItem.rectified ? projectItem.rectified : '-' }}</uni-td>
                </uni-tr>
              </uni-table>
            </view>
            <view class="progess-main" v-if="routerType === 'completed'">
              <uni-table ref="table" stripe empty-text="暂无更多数据">
                <uni-tr :style="{ backgroundColor: '#F5F6F8' }">
                  <uni-th v-for="(progessItem,progessIndex) in columnsCompleted" :key="progessIndex" align="center"
                          :width="progessItem.width">{{ progessItem.label }}
                  </uni-th>
                </uni-tr>
                <uni-tr v-for="(projectItem,projectIndex) in tableData" :key="projectIndex"
                        :style="{ backgroundColor: '#F5F6F8' }">
                  <uni-td align="center">{{ projectItem.name }}</uni-td>
                  <uni-td align="center">{{ projectItem.amount ? projectItem.amount : '-' }}</uni-td>
                  <uni-td align="center" @click.native="jumpToQuantity(projectItem)">
                    {{ projectItem.finished ? projectItem.finished : '-' }}
                  </uni-td>
                </uni-tr>
              </uni-table>
            </view>
            <view class="share-main" v-if="routerType === 'notService'"> 暂无数据</view>
          </van-collapse-item>
        </van-collapse>
        <!-- 施工计划 -->
        <van-collapse v-model="planActiveName" accordion>
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">施工计划</text>
              </view>
            </template>
            <!--  第二层  -->
            <van-collapse v-model="constructionActiveName" accordion v-for="(planItem, planIndex) in planList"
                          :key="planIndex" v-if="routerType !== 'notService'">
              <van-collapse-item class="arrive-second" :name="planItem.ID" size="large">
                <template #title>
                  <view>
                    <img class="imgHistory" :src="iconUrlSgjh" alt="">
                    <text class="small-title">{{ planItem.title }}</text>
                  </view>
                </template>
                <view class="paln-main">
                  <!--  第二层 主tab切换   -->
                  <view class="state-tab">
                    <view class="tab-item" :class="currentTab === 'monthTab' ? 'tab-item-current': ''"
                          @click="tabChange('monthTab')">月计划
                    </view>
                    <view class="tab-item" :class="currentTab === 'weekTab' ? ' tab-item-current': ''"
                          @click="tabChange('weekTab')">周计划
                    </view>
                  </view>
                  <view v-if="currentTab === 'monthTab'" class="tab-main">
                    <commonalityTable :tableData="planItem.monthPlan || []"></commonalityTable>
                  </view>
                  <view v-if="currentTab === 'weekTab'" class="child-state-tab">
                    <view class="tab-item" v-for="(weekItem,weekIndex) in planItem.weekList" :key="weekIndex"
                          @click="tabChangeChild(weekIndex)"
                          :class="currentTabChild === weekIndex ? 'tab-item-current': ''">
                      {{ weekItem.titleWeek }}
                    </view>
                  </view>
                  <view v-if="currentTab === 'weekTab'" class="tab-main">
                    <commonalityTable :tableData="planItem.weekList[currentTabChild].weekData || []"></commonalityTable>
                  </view>
                </view>
              </van-collapse-item>
            </van-collapse>
            <view class="share-main" v-if="routerType === 'notService'"> 暂无数据</view>
          </van-collapse-item>
        </van-collapse>
        <!-- 问题详情 -->
        <van-collapse v-model="questionActiveName" accordion v-if="routerType !== 'completed'">
          <van-collapse-item class="arrive-fold" name="1" size="large">
            <template #title>
              <view>
                <text class="title-collap">问题详情</text>
              </view>
            </template>
            <van-collapse v-model="detailsActiveName" accordion v-for="(questionItem, questionIndex) in questionList"
                          :key="questionIndex" v-if="routerType === 'inService'">
              <van-collapse-item class="arrive-second" :name="questionItem.ID" size="large">
                <template #title>
                  <view @click="jump(questionItem)">
                    <img class="imgHistory" :src="iconUrlWtxq" alt="">
                    <text class="small-title">{{ questionItem.title }}</text>
                  </view>
                </template>
              </van-collapse-item>
            </van-collapse>
            <view class="share-main" v-if="routerType === 'notService' || !questionList || questionList.length === 0">
              暂无数据
            </view>
          </van-collapse-item>
        </van-collapse>
      </view>
    </view>
    <!-- 选择工程名称 -->
    <van-popup v-model="showSelectProject" position="bottom">
      <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="projectNameColumns"
                  @confirm="onConfirm" @cancel="showSelectProject = false"/>
    </van-popup>
    <!--  选择站点名称  -->
    <van-popup v-model="showSelectSite" position="bottom">
      <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="siteNameColumns"
                  @confirm="onConfirmSite" @cancel="showSelectSite = false"/>
    </van-popup>
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
			<van-swipe>
				<div v-for="(image, index) in fileList" :key="index">
					<van-swipe-item v-if="image.img" style="text-align: center;">
						<img :src="image.img" />
					</van-swipe-item>
				</div>
			</van-swipe>
		</van-popup>
  </view>
</template>
<script>
import {mapGetters} from "vuex";
import navBar from "../../../../components/common/nav-bar.vue";
import plateTitle from '../../common/plateTitle.vue'
import commonalityTable from './commonalityTable.vue'
import {Dialog} from "vant";
import config from "../../../../common/config";
import {merge} from "lodash";

let statusCodeMap = {
  "notService": "1",
  "inService": "2",
  "completed": "3",
}

export default {
  name: 'projectDetails',
  components: {navBar, plateTitle, commonalityTable},
  props: {},
  data() {
    return {
      baseUrl: "",
      queryOptions: "", // 从路由中获取的参数
      iconUrlLcb: require('../../../../static/controlImg/lcb.png'),
      iconUrlWzdh: require('../../../../static/controlImg/arrive.png'),
      iconUrlSgxc: require('../../../../static/controlImg/sgxc.png'),
      iconUrlSgjh: require('../../../../static/controlImg/plan.png'),
      iconUrlWtxq: require('../../../../static/controlImg/wzdh.png'),
      currentTab: 'monthTab',
      currentTabChild: 0,
      currentIndex: '0',
      currentIndexChild: '0',
      engInformation: {
        siteId: "--", //站点id
        objId: "--", //工程id
        stationName: "--", //站点名称
        engName: "--", //工程名称
        batchName: "--", //工程批次
        startTime: "--", //工程工期开始时间
        completedTime: "--", //工程工期结束时间
        ownerDeptName: "--", //业主单位
        ownerName: "--", //业主单位负责人
        superviseDeptName: "--", //监理单位
        superviseName: "--", //监理单位负责人
        consDeptName: "--", //施工单位
        consName: "--", //施工单位负责人
        time: "--" // 工程工期
      },
      showSelectProject: false,
      showSelectSite: false,
      projectNameColumns: [],
      siteNameColumns: [],
      pickerName: '工程名称',
      projectActiveNames: '1', // 里程碑是否展开
      arriveActiveName: '1',// 物资到货展开
      suppliesActiveName: '1',// 物资到货展开子项
      sceneActiveName: '1', // 施工现场展开
      sceneChildActiveName: '1', // 施工现场展开子项
      progessActiveName: '1', // 工程进度展开
      planActiveName: '1', // 施工计划展开
      constructionActiveName: '1', // 施工计划展开
      questionActiveName: '1', // 问题详情展开
      detailsActiveName: '1', // 问题详情展开子项
      milestoneList: [
        {
          title: '工程开工',
        },
        {
          title: '工程竣工',
        },
        {
          title: '初步验收',
        },
        {
          title: '竣工验收',
        }
      ], //里程碑集合
      arriveList: [],//物资到货集合
      sceneList: [], //施工现场数据
      tableData: [], //工程进度
      tableDataCompleted: [], //工程进度
      columns: [
        {
          label: '设备类型',
          width: '80',
        },
        {
          label: '总数量',
          width: '42',
        },
        {
          label: '已完工',
          width: '42',
        },
        {
          label: '未完工',
          width: '42',
        },
        {
          label: '待整改',
          width: '42',
        },
      ],
      columnsCompleted: [
        {
          label: '设备类型',
          width: '80',
        },
        {
          label: '总数量',
          width: '42',
        },
        {
          label: '已完工',
          width: '42',
        }
      ],
      planList: [], //施工计划
      questionList: [], //问题详情
      stateColor: (item) => {
        if (item == 1) {
          return 'left-state-tq'
        } else if (item == 2) {
          return 'left-state-aq'
        } else if (item == 3) {
          return 'left-state-yq'
        }
      },
      routerType: '',//获取路由参数更改页面
	    prevPage:'',
      fileList: [], //图片预览信息
      showPreview: false, //图片预览
    };
  },
  computed: {
    ...mapGetters(["userData"])
  },
  watch: {},
  onLoad(option) {
	  this.prevPage = "";
	 this.prevPage = option.entrytype;
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
      // this.baseUrl = 'http://192.168.0.127:18001';

    })
    this.queryOptions = JSON.parse(decodeURIComponent(option.options))
    this.routerType = this.queryOptions.type
    this.getEngDefaultT()
  },
  methods: {
    imageHandle(imgItem, imgIndex, handleType, i){
      if (handleType === 'PREVIEW') {
        this.fileList = [{img: imgItem.furl}]
        this.showPreview = true;
      }
    },
    goBack() {
      if(this.prevPage === 'gclist'){
        uni.navigateTo({
          url: `/pages/communicationControl/workbench/projectList/index?frequency=${'second'}`
        })
      }else{
        uni.navigateBack()
      }
    },
    // 获取默认详情
    getEngDefaultT() {
      let params = {
        "engId": this.queryOptions.engId, //工程id
        "statusCode": statusCodeMap[this.routerType], //状态码(1:未开工,2:已开工,3:已完工)
        "userId": this.userData.USERID//用户id
      }
      this.$apiRequest.gcgkApi.getEngDefault(params).then(res => {
        if (res.code === 0) {
          merge(this.engInformation,res.data.engInformation)
          this.engInformation.stationName = res.data.stationName;
          this.engInformation.siteId = res.data.siteId;
          this.engInformation.time = !res.data.engInformation.startTime?'--':res.data.engInformation.startTime + " 至 " + !res.data.engInformation.completedTime?'--':res.data.engInformation.completedTime
          if (this.routerType !== "notService") {
            this.milestoneList = res.data.milestoneList
            this.tableData = res.data.tableData
            this.planList = res.data.planList
            this.sceneList = res.data.sceneList
            this.arriveList = res.data.arriveList && res.data.arriveList ? res.data.arriveList.map(item => {
              item.fileList.map(ite => {
                 ite.furl = this.baseUrl + ite.furl
                return {...ite}
              })
              return {...item}
            }):[]

            if (this.routerType === "inService") {
              this.questionList = res.data.questionList
            }
          }
        }
      })
    },
    // 获取详情
    getEngDetailsT() {
      let params = {
        "engId": this.engInformation.objId, //工程id
        "statusCode": statusCodeMap[this.routerType], //状态码(1:未开工,2:已开工,3:已完工)
        "userId": this.userData.USERID,//用户id
        "siteId": this.engInformation.siteId, //站点id
      }
      this.$apiRequest.gcgkApi.getEngDetails(params).then(res => {
        if (res.code === 0) {
          console.log('33333', res.data.engInformation)
        
          this.engInformation = Object.assign({}, {
            stationName: this.engInformation.stationName,
            siteId: this.engInformation.siteId
          },res.data.engInformation);
          this.engInformation.time = !res.data.engInformation.startTime?'--':res.data.engInformation.startTime + " 至 " + !res.data.engInformation.completedTime?'--':res.data.engInformation.completedTime
          if (this.routerType !== "notService") {
            this.milestoneList = res.data.milestoneList
            this.tableData = res.data.tableData
            this.planList = res.data.planList
            this.sceneList = res.data.sceneList
            this.arriveList = res.data.arriveList

            if (this.routerType === "inService") {
              this.questionList = res.data.questionList
            }
          }
        }
      })
    },
    onOpenPicker(e) {
      if (e === 'projectName') {
        this.pickerName = '工程名称'
        let params = {
          userId: this.userData.USERID,
          statusCode: statusCodeMap[this.routerType]
        }
        this.$apiRequest.gcgkApi.getEngListByStatus(params).then(res => {
          this.projectNameColumns = res.data.map(item => {
            return {
              text: item.engName,
              value: item.objId,
            };
          })
        })
        this.showSelectProject = true
      } else if (e === 'siteName') {
        if (this.engInformation.engName === '') {
          Dialog.alert({
            message: "请先选择工程名称",
            theme: "round-button"
          });
        } else {
          this.pickerName = '站点名称'
          let params = {
            engId: this.engInformation.objId
          }
          this.$apiRequest.gcgkApi.getEngSiteList(params).then(res => {
            this.siteNameColumns = res.data.map(item => {
              return {
                text: item.stationName,
                value: item.stationId,
              };
            })
          })
          this.showSelectSite = true
        }
      }
    },
    onConfirm(value) {
      this.engInformation.engName = value.text
      this.engInformation.objId = value.value
      this.showSelectProject = false
    },
    // 获取站点名称
    onConfirmSite(value) {
      console.log('11111', value)
      this.engInformation.stationName = value.text
      this.engInformation.siteId = value.value
      console.log('22222', this.engInformation)

      this.showSelectSite = false
      this.getEngDetailsT()
    },
    tabChange(currentTab) {
      this.currentTab = currentTab;
      (currentTab === "weekTab") && (this.currentIndex = '1');
      (currentTab === "monthTab") && (this.currentIndex = '0');
    },
    tabChangeChild(currentTabChild) {
      this.currentTabChild = currentTabChild;
      (currentTabChild === "fifthWeek") && (this.currentIndexChild = '4');
      (currentTabChild === "forthWeek") && (this.currentIndexChild = '3');
      (currentTabChild === "thirdWeek") && (this.currentIndexChild = '2');
      (currentTabChild === "secondWeek") && (this.currentIndexChild = '1');
      (currentTabChild === "firstWeek") && (this.currentIndexChild = '0');
    },
    jumpToQuantity(item) {
      let options = {
        engId: this.engInformation.objId,
        siteId: this.engInformation.siteId,
        projectName: this.engInformation.engName,
        siteName: this.engInformation.stationName,
        type: this.queryOptions.type, // 工程状态
      }
      uni.navigateTo({
        url: `/pages/communicationControl/completed/quantityWork?options=${encodeURIComponent(JSON.stringify(options))}`
      })
    },
    jump(item) {
        let options = {
          engId: this.engInformation.objId,
          siteId: this.engInformation.siteId,
          type: this.queryOptions.type, // 工程状态
        }
        uni.navigateTo({
          url: `/pages/communicationControl/completed/questionDetails?options=${encodeURIComponent(JSON.stringify(options))}`
        })
      }
  }
};
</script>
<style scoped lang="scss">
.project-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;

  .project-content {
    width: calc(100vw - #{px2vw(60)});
    height: calc(100vh - #{px2vh(226)});
    margin: px2vh(30);
    background: #F2F6FA;
    overflow: auto;

    .plate-title {
      margin-bottom: px2vh(30);
    }

    .basic-info {
      margin-bottom: px2vh(30);
    }

    // 里程碑样式
    .milestone-main {
      width: 100%;
      height: px2vh(1086);
      display: flex;
      flex-direction: column;
      li {
        width: 100%;
        height: px2vh(248);
        background: #fff;
        margin-bottom: px2vh(30);
        border-radius: px2vh(20) px2vw(20);
        display: flex;
        flex-direction: column;
        .milestone-top {
          display: flex;
          align-content: center;
          padding: px2vh(38) px2vw(52);
          img {
            width: px2vw(74);
            margin-right: px2vw(22);
          }

          .milestont-title {
            flex: 0 0 71%;
            font-size: px2vh(42);
            color: #333;
          }

          .milestone-state {
            font-size: px2vh(32);
            line-height: px2vh(60);
            padding: 0 px2vw(18);
            border-radius: px2vw(10);
          }

          .left-state-aq {
            color: #417ADC;
            background: rgba(65, 122, 220, .1);
          }

          .left-state-yq {
            color: #FF7070;
            background: rgba(255, 112, 112, .1);
          }

          .left-state-tq {
            color: #3CDA68;
            background: rgba(60, 218, 104, .1);
          }
        }

        hr {
          flex-shrink:0;
          width: 92%;
          margin-left: 4%;
          height: px2vh(2);
          background: none repeat scroll 0 0 #e5e5e5;
          border: thin none;
          margin-bottom: px2vh(30);
        }

        .milestone-footer {
          width: calc(100% - #{px2vw(120)});
          margin-left: px2vw(60);
          line-height: px2vh(40);
          font-size: px2vh(32);
          display: flex;

          .left-main {
            width: 50%;

            .left-title {
              margin-right: px2vw(30);
              color: #666;
            }

            .left-date {
              color: #666;
            }
          }

          .left-main:last-child {
            margin-left: px2vw(80);
          }
        }
      }

      li:last-child {
        margin-bottom: 0;
      }
    }

    // 物资到货
    .title-collap {
      font-size: px2vh(40);
      font-weight: bold;
      color: #666;
    }

    .imgHistory {
      width: px2vw(64);
      vertical-align: middle;
      margin-right: px2vw(20)
    }

    .small-title {
      font-size: px2vh(42);
      color: #333;
    }

    .mg {
      margin-bottom: px2vh(30);
    }

    .history-main {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      background: #fff;
      padding-top: px2vh(42);

      .image-list {
        width: px2vw(230);
        height: px2vw(230);
        flex-shrink: 0;
        margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(45) calc((100% - #{px2vw(690)}) / 6);

        img {
          width: px2vw(230);
          height: px2vh(230);
        }
      }
    }

    // 施工现场
    .scene-main {
      width: 100%;
      background: #fff;
      padding-top: px2vh(40);
      padding-bottom: px2vh(40);

      .left-main {
        width: calc(100% - #{px2vw(200)});
        margin-left: px2vw(50);
        height: px2vh(120);
        background: #F5F6F8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: px2vh(30);
        padding-left: px2vw(50);
        padding-right: px2vw(50);
        font-size: px2vh(36);
        color: #333;
      }

      .left-main:last-child {
        margin-bottom: 0;
      }
    }

    // 施工计划
    .paln-main {
      width: calc(100% - #{px2vw(60)});
      padding: px2vw(30);
      background: #fff;
      height: auto;

      .state-tab {
        width: px2vw(370);
        box-sizing: border-box;
        display: flex;
        color: #417ADC;
        justify-content: center;
        align-items: center;
        margin-bottom: px2vh(40);

        .tab-item {
          width: px2vw(170);
          height: px2vh(70);
          margin-right: px2vw(30);
          display: flex;
          border-radius: px2vw(20);
          background-color: rgba(65, 122, 220, 0.1);
          justify-content: center;
          align-items: center;
          font-size: px2vw(38);

          &.tab-item-current {
            height: px2vh(70);
            border-radius: px2vw(20);
            background-color: rgba(65, 122, 220, 1);
            color: #fff;
          }
        }
      }

      .child-state-tab {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        color: #417ADC;
        justify-content: center;
        align-items: center;
        margin-bottom: px2vh(40);

        .tab-item {
          width: px2vw(170);
          height: px2vh(70);
          margin-right: px2vw(30);
          display: flex;
          border-radius: px2vw(20);
          background-color: rgba(65, 122, 220, 0.1);
          justify-content: center;
          align-items: center;
          font-size: px2vw(38);

          &.tab-item-current {
            height: px2vh(70);
            border-radius: px2vw(20);
            background-color: rgba(65, 122, 220, 1);
            color: #fff;
          }
        }
      }

      .tab-main {
        width: 100%;
        height: auto;
      }
    }

    // 工程进度
    .progess-main {
      width: calc(100% - #{px2vw(60)});
      padding: px2vw(30);
      background: #fff;
      height: auto;
    }

    .share-main {
      height: px2vh(150);
      text-align: center;
      line-height: px2vh(150);
    }
  }
}

.arrive-fold /deep/ .van-cell {
  background: #F2F6FA;
}

/deep/ .van-collapse-item__content {
  padding: 0 0 !important;
  background: #F2F6FA;
}

/deep/ .van-cell--large {
  padding: px2vh(16) px2vw(20);
}

.arrive-second /deep/ .van-cell {
  background: #fff;
}

/deep/ .van-hairline--top-bottom {
  margin-bottom: px2vh(20);
}

/deep/ .van-field__control:disabled {
  color: #333;
  -webkit-text-fill-color: #333;
}

.uni-table-th {
  font-size: 12px;
}

.uni-table-td {
  font-size: 10px;
  line-height: 16px;
  padding: 8px 0;
}

.van-preview-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .van-swipe {
    width: 100%;
    height: 60%;
  }
  img {
    height: 90%;
    width: 100vw;
  }
}
</style>
